<extend name="Public/base"/>

<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>领域内各技术持有量</h2>
    </div>
    
    <!-- 数据列表 -->
    <div class="data-table with-padding">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    </div>
    <div class="with-padding">
        {$_page}
    </div>
</block>

<block name="script">
   
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="__STATIC__/echarts-all.js"></script>
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>

  <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        	    title : {
        	        text: '区域内各技术持有量占比',
        	        subtext: '浙江地区',
        	        x:'center'
        	    },
        	    tooltip : {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        x: 'left',
        	        data: ['技术创新','节能环保','新材料','健康','洗衣机',
        	               '空调','纳米技术','制热','电脑','其它']
        	    },
        	    toolbox: {
        	        show : true,
        	        feature : {
        	            // mark : {show: true},
        	            dataView : {show: true, readOnly: true},
        	            restore : {show: true},
        	            saveAsImage : {show: true}
        	        }
        	    },
        	    
        	    calculable : true,
        	    series : [
        	        {
        	            name: '访问来源',
        	            type: 'pie',
        	            radius : '55%',
        	            center: ['50%', '60%'],
        	            data:[
        	                {value:435, name:'技术创新'},
        	                {value:510, name:'节能环保'},
        	                {value:234, name:'新材料'},
        	                {value:435, name:'健康'},
        	                {value:148, name:'洗衣机'},
        	                 {value:335, name:'空调'},
        	                {value:310, name:'纳米技术'},
        	                {value:234, name:'制热'},
        	                {value:335, name:'电脑'},
        	                {value:248, name:'其它'}
        	            ],
        	            itemStyle: {
        	                emphasis: {
        	                    shadowBlur: 10,
        	                    shadowOffsetX: 0,
        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                }
        	            }
        	        }
        	    ]
        	};


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart.setTheme(echartstheme);
    </script>

    <script type="text/javascript">
        //导航高亮
        highlight_subnav("{:U('Hostdata/trading')}");
    </script>
</block>